<template>
<div>
    <!--头部操作行开始-->
    <div class="form-top">
        <div class="form-top-left"></div>
        <!--右侧全局操作按钮-->
        <div class="form-top-right">
            <el-button-group>
                <el-button ref="buttonEl" type="xingjian" icon="el-icon-plus" @click="BuildNew" @keyup.enter.native="aaa" v-if="_SHOWBTN('wzgl-lzda-zzjg-jt-xj')">新建</el-button>
            </el-button-group>
        </div>
    </div>
    <!--头部操作行结束-->
    <!--中间表格区域开始-->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" :border="true">
        <el-table-column type="index" label="序号" width="52" prop="number" align="center"></el-table-column>
        <el-table-column prop="tip" label="部门" width="518" align="center">
            <template slot-scope="scope">
                <el-input :disabled="scope.row.isEdit" :autofocus="true" v-model="scope.row.tip" placeholder="请输入内容" :class="[scope.row.isEdit?'':'borderBlue']" @keyup.enter.native="EnterSubmit(scope.row)"></el-input>
            </template>
        </el-table-column>
        <el-table-column prop="content" label="纪委书记/纪委委员" show-overflow-tooltip width="576" align="center">
            <template slot-scope="scope">
                <el-input :disabled="scope.row.isEdit" :autofocus="true" v-model="scope.row.content" placeholder="请输入内容" :class="[scope.row.isEdit?'':'borderBlue']" @keyup.enter.native="EnterSubmit(scope.row)"></el-input>
            </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" show-overflow-tooltip width="171" align="center">
            <template slot-scope="scope">
                <span class="up" @click="up(scope.row.id)" v-if="_SHOWBTN('wzgl-lzda-zzjg-jt-up')">
                    <img src="@/assets/image/up.png" alt />
                </span>
                <span class="down" @click="down(scope.row.id)" v-if="_SHOWBTN('wzgl-lzda-zzjg-jt-down')">
                    <img src="@/assets/image/down.png" alt />
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" show-overflow-tooltip width="223" align="center">
            <template slot-scope="scope">
                <el-button-group>
                    <el-button type="bianji" @click="BianJi(scope.$index,scope.row)" v-if="scope.row.isEdit" v-show="_SHOWBTN('wzgl-lzda-zzjg-jt-xg')">编辑</el-button>
                    <el-button type="bianji" @click="save(scope.row)" v-else v-show="_SHOWBTN('wzgl-lzda-zzjg-jt-xg')">保存</el-button>
                    <Single-deletion :clearOne="clearOne" :id="scope.row.id" :index="scope.$index" :clearOneID="clearOneID" showBetCode="wzgl-lzda-zzjg-jt-sc"></Single-deletion>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 20px"></div>
    <!--中间表格区域结束-->
</div>
</template>

<script>
import SingleDeletion from "@/components/Popup/SingleDeletion";

export default {
    components: {
        SingleDeletion,
    },
    data() {
        return {
            ischaice: -1,
            editIndex: -1,
            dialogFormVisible: false,
            //表格数据
            tableData: [],
            multipleSelection: [],
        };
    },
    created() {
        this.GetGroupList();
    },
    methods: {
        aaa(e) {
            console.log(e, "aaa");
        },
        //新建一个新的
        BuildNew(e) {
            // console.log(e,"ee")

            this.editIndex = index;
            this.tableData.push({
                content: "",
                tip: "",
            });
            let index = this.tableData.length - 1;
            this.ischaice = index;
            e.target.blur();
        },
        //删除的接口
        clearOne(id) {
            this.Api.getGroupRemove({
                id: id,
            }).then((res) => {
                // console.log(res,111)
                this.GetGroupList();
            });
        },
        //没有id的删除
        clearOneID(index) {
            this.tableData.splice(index, 1);
        },
        //键盘enter事件
        EnterSubmit(row) {
            if (row.id !== undefined) {
                if (this.editIndex === row.id) {
                    // console.log(1112)
                    this.Api.getGroupChange({
                        content: row.content,
                        id: row.id,
                        tip: row.tip,
                    }).then((res) => {
                        // console.log(11132)
                        if (res.code === "0") {
                            // console.log(11124)
                            this.editIndex = -1;
                            // console.log("msg")
                        }
                    });
                }
            } else {
                this.Api.getGroupAdd({
                    content: row.content,
                    tip: row.tip,
                }).then((res) => {
                    if (res.code === "0") {
                        this.editIndex = -1;
                    }
                });
            }
        },
        //编辑按钮
        BianJi(index, row) {
            this.ischaice = index;
            this.editIndex = row.id;
            row.isEdit = false;
        },
        //保存按钮
        save(row) {
            if (row.content.length > 0 && row.tip.length > 0) {
                if (row.id !== undefined) {
                    this.Api.getGroupChange({
                        content: row.content,
                        id: row.id,
                        tip: row.tip,
                    }).then((res) => {
                        if (res.code === "0") {
                            this.editIndex = -1;
                            this.ischaice = -1;
                            row.isEdit = true;
                            this.GetGroupList();
                        }
                    });
                } else {
                    this.Api.getGroupAdd({
                        content: row.content,
                        tip: row.tip,
                    }).then((res) => {
                        if (res.code === "0") {
                            this.editIndex = -1;
                            this.ischaice = -1;
                            row.isEdit = true;
                            this.GetGroupList();
                        }
                    });
                }
            } else {
                this.$message.warning("部门/纪委书记/纪委委员不能为空");
            }
        },
        //箭头
        // 上移
        up(id) {
            // console.log(id, 1212);
            let ID = {
                id: id,
            };
            this.Api.getDanganGroupUp(ID).then((res) => {
                // console.log(res,111)
                this.GetGroupList();
                // console.log("上");
            });
        },
        // 下移
        down(id) {
            let ID = {
                id: id,
            };
            this.Api.getGroupDown(ID).then((res) => {
                // console.log(res,111)
                this.GetGroupList();
                // console.log("上");
            });
        },
        //集团列表
        GetGroupList() {
            this.Api.geGroupList().then((res) => {
                this.tableData.length = 0;
                this.tableData = res.data;
                this.tableData.map((item) => {
                    this.$set(item, "isEdit", true);
                });
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
    },
};
</script>

<style lang="less" scoped>
.form-top {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 21px;

    .form-top-left {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 21px;
    }
}

/deep/.el-input__inner {
    width: 154px;
    height: 36px;
    background: rgba(255, 255, 255, 1);
    border-radius: 3px;
    border: 1px solid rgba(230, 230, 230, 1);
}

/deep/.el-select {
    margin-right: 10px;
}

/deep/.el-button--primary {
    width: 52px;
    height: 36px;
    background: rgba(61, 127, 255, 1);
    border-radius: 3px;
    padding: 0;
}

/deep/.el-button--default {
    width: 52px;
    height: 36px;
    background: rgba(240, 242, 245, 1);
    border-radius: 3px;
    border: 1px solid rgba(215, 219, 224, 1);
    padding: 0;
}

/deep/.el-button--bianji {
    width: 60px;
    height: 28px;
    background: #3d7fff;
    border-radius: 3px;
    padding: 0;
    color: white;
    margin-right: 10px !important;
}

/deep/.el-button--shanchu {
    width: 60px;
    height: 28px;
    background: #fb363f;
    border-radius: 3px;
    border: 1px solid rgba(251, 54, 63, 1);
    padding: 0;
    color: white;
}

/deep/.el-button--xingjian {
    width: 80px;
    height: 36px;
    background: rgba(61, 127, 255, 1);
    border-radius: 3px;
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
    padding: 0;
}

/deep/.el-table__header {
    background-color: #e8e8e8 !important;
}

/deep/.el-table_1_column_1 {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

/deep/.el-table {
    td {
        padding: 8px 0;
    }

    th {
        padding: 8px 0;
    }
}

/deep/.el-button--chakan {
    width: 60px;
    height: 28px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    color: #333333;
    padding: 0;
    margin-right: 20px !important;
}

/deep/.el-button--shenghe {
    width: 60px;
    height: 28px;
    background: #f5a623;
    border-radius: 4px;
    color: white;
    padding: 0;
}

.fenye {
    margin-left: 730px;
}

/**改动 */
/deep/.el-input {
    width: 154px;
    margin-right: 20px;
}

/deep/.el-date-editor {
    position: relative;
}

/deep/.el-input__icon,
.el-icon-date {
    line-height: 35px;
    position: absolute;
    left: 120px;
}

.time-zhi {
    margin-right: 13px;
}

/deep/.el-table_10_column_67,
.is-leaf {
    /deep/.cell {
        padding-left: 35px;
    }
}

.jia-pic {
    display: inline-block;
    width: 104px;
    height: 30px;

    img {
        width: 104px;
        height: 30px;
    }
}

/deep/.has-gutter {
    /deep/tr {
        height: 46px;
        background: #e8e8e8;
    }
}

/deep/.el-input {
    width: 400px;
    height: 35px;

    .el-input__inner {
        text-align: center;
        width: 398px;
        height: 33px;
        border-radius: 4px;
        // border: 1px solid rgba(221, 221, 221, 1);
        border: 0;
        color: #333333 !important;
        background-color: white;
    }
}

.borderBlue {
    border: 1px solid rgba(61, 127, 255, 1);
    border-radius: 4px;
}

.up {
    cursor: pointer;
    margin-right: 20px;
}

.down {
    cursor: pointer;
}

.el-button-group {
    display: flex;
    justify-content: center;
}
</style>
